<template>

    <div class="rank">

      <header-component></header-component>
      <div class="container">
        <div class="indexcont">
          <div class="time"><img src="../assets/images/header-top2.png"></div>
          <div class="sysmsg">
        <span class="item">
          <div>参与选手</div>
          <div>{{amountCandidates}}人</div>
        </span>
            <span class="item">
              <div>累计投票</div>
              <div>{{amountVotes}}次</div>
            </span>
            <span class="item">
              <div>访问量</div>
              <div>{{flows}}次</div>
            </span>
          </div>
          <search-bar v-on:search-result="searchResult"></search-bar>
          <div class="indexcont-title"><img src="../assets/images/hdpm.png"></div>

          <div class="indexcont-cont"  >
            <table class="rank-table " v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
              <tr class="th">
                <th class="num">排名</th>
                <th class="number">编号</th>
                <th class="real">作者</th>
                <th class="name">作品名称</th>
                <th class="votes">票数</th>
              </tr>
              <tr v-for="(item,index) in items">
                <router-link :to="{ name: 'detail', params: { id: item.candiateId }}">
                  <td class="num">{{index+1}}</td>
                  <td class="number">{{item.number}}号</td>
                  <td class="real">{{item.realName}}</td>
                  <td class="name">{{item.title}}</td>
                  <td class="votes">{{item.votes}}</td>
                </router-link>
              </tr>
            </table>

          </div>
        </div>
      </div>
      <footer-msg></footer-msg>
    </div>

</template>
<style scoped>
  .indexcont img{
    max-width:100%;
  }
  .indexcont .time{
    margin-top:0.1rem;
  }
  .indexcont-title{
    margin-top:0.15rem;
  }
  .rank-table{
    width:100%;
    font-size:0.14rem;
    border: 1px solid #DA0843;
  }
  .rank-table a{
    font-size:0;
  }
  .rank-table .num,.rank-table .number,.rank-table .votes,.rank-table .real{
    display:inline-block;
    vertical-align: middle;
    font-size: 0.14rem;
    text-align:center;
  }
  .rank-table .number{
    width:15%;
  }
  .rank-table .num{
    width:12%;
  }
  .rank-table .real{
    width:20%;
  }
  .rank-table .votes{
    width:13%;
  }
  .rank-table tr{
    line-height:0.3rem;
    text-align:center;
  }
  .rank-table tr:nth-child(2n){
    background:#FFEFF3;
  }
  .rank-table .name{
    width:40%;
    display:inline-block;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: middle;
    font-size: 0.14rem;
    text-align:center;
  }
  .rank-table .th{
    background: #DA0843;
    line-height: 0.3rem;
    color: #fff;
  }
</style>
<script>
  import HeaderComponent from './Header.vue'
  import FooterMsg from './FooterMsg.vue'
  import SearchBar from './SearchBar.vue'
  export default{
        data () {
          return{
            items: "",
            busy: false,
            page:1,
            finsh:false,
            amountCandidates:"",
            amountVotes:"",
            flows:""
          }
        },
        components:{
            HeaderComponent,FooterMsg,SearchBar

        },
        methods: {
          loadMore: function() {
            this.page=this.page+1;
            this.axios.get("/api/vote/1/rank?page="+this.page).then((response) => {
              if(response.data.code===200){
                if(response.data.object.rankItems.length<=0){

                }else{
                  this.items.push(response.data.object.rankItems);
                }
              }
            })
          },
          addVotesFun:function(id){
            this.axios.post("/api/vote/1/candidate/"+id).then((response) => {
              if(response.data.code===200){
                alert(response.data.message);
                this.$router.go(0);
              }else{
                if(response.data.message==="投票必须先关注公众号"){
                  this.follow=true;
                  return false;
                }
                alert(response.data.message);
              }

            })
          },
          searchResult:function(data){
            if(data){
              this.items=data;
              this.items[0].rank=0;
              console.log(this.items);
            }
          }
        },
        mounted(){
          this.axios.get("/api/vote/1/rank").then((response) => {
            this.items=response.data.object.rankItems;
            this.amountVotes=response.data.object.amountVotes;
            this.amountCandidates=response.data.object.amountCandidates;
            console.log(response.data)
          })
          this.axios.get("/api/vote/1/home?page=0").then((response) => {
            this.flows=response.data.object.flows;
          })
        }
    }


</script>
